<template>
    <div class="logistics-management">
      <!-- 顶部按钮组 -->
      <el-button-group>
        <el-button>批量操作</el-button>
        <el-button>导入</el-button>
        <el-button>导出</el-button>
        <el-button>打印</el-button>
      </el-button-group>

      <!-- 搜索栏 -->
      <el-form :inline="true"  class="demo-form-inline" style="padding: 20px 0;"> 
        <el-form-item label="订单状态">
          <el-select clearable placeholder="请选择订单状态" v-model="searchForm.orderStatus">
              <el-option v-for="item in options" 
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select>  
        </el-form-item>
        <el-form-item label="始发地" >
          <el-cascader v-model="searchForm.originList"
            :options="originOptions"
            :props="props"
            clearable
            placeholder="请选择始发地">
          </el-cascader>
        </el-form-item>
        <el-form-item label="目的地" >
          <el-cascader v-model="searchForm.destinationList"
            :options="originOptions"
            :props="props"
            clearable
            placeholder="请选择始发地">
          </el-cascader>
        </el-form-item>
        <el-form-item label="签收日期">
          <el-date-picker   
           v-model="searchForm.pickupTimeList"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-input  placeholder="请输入关键词搜索" clearable v-model="searchForm.keyword" ></el-input> <!--  -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" >
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button size="mini" @click="addBtn(scope.row)">签收</el-button>
            <el-button size="mini" @click="signOrderDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderId" label="订单号" width="180px">
        </el-table-column>
        <el-table-column prop="name" label="客户" width="180px"></el-table-column>
        <el-table-column label="始发地" width="130px">
          <template slot-scope="scope">
            <div>
           <span>{{ scope.row.name1 }}</span>/
           <span> {{ scope.row.name2 }}</span> 
            </div>
            </template>
        </el-table-column>
        <el-table-column label="目的地" width="130px" >
          <template slot-scope="scope">
            <div>
           <span>{{ scope.row.name3 }}</span>/
           <span> {{ scope.row.name4 }}</span> 
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
              <template slot-scope="scope">
                <span>
                    <span v-if="scope.row.orderStatus == 0">待分配</span>
                    <span v-else-if="scope.row.orderStatus == 1">待调度</span>
                    <span v-else-if="scope.row.orderStatus == 2">运输中</span>
                    <span v-else-if="scope.row.orderStatus == 3">已签收</span>
                    <span v-else-if="scope.row.orderStatus == 4">已拒绝</span>
                    <span v-else-if="scope.row.orderStatus == 5">已取消</span>
                    <span v-else-if="scope.row.orderStatus == 6">待提货</span>
                    <span v-else>未知状态</span>
                </span>
              </template>
        </el-table-column>
        <el-table-column prop="faHuoAddress" label="发货地址" width="200px"></el-table-column>
        <el-table-column prop="customerAddress" label="收货地址" width="250px"></el-table-column>
        <el-table-column prop="goodsCount" label="订单数量"></el-table-column>
        <el-table-column prop="signCount" label="签收数量"></el-table-column>
        <el-table-column prop="realName" label="操作人"></el-table-column>
        <el-table-column prop="signTime" label="签收时间" width="150px"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
          background
          :page-sizes="[3, 5, 7 , 10 , 20]"
          :page-size="pageSize"
          :current-page="pageNum"
          layout=" total,sizes,prev, pager, next,jumper"
          :total="total"
          @next-click="nextPage"
          @prev-click="prevPage"
          @current-change="changePage"
          @size-change="sizeChange">
      </el-pagination>

       <!--   新增弹窗开始-->
       <el-dialog title="签收单" :visible.sync="addVisible">
            <el-form >
              <el-form-item label="签收类型" label-width="80px">
                  <el-select placeholder="请选择" style="width: 120px;" v-model="add.status">
                      <el-option label="签收" value="2"></el-option>
                      <el-option label="拒绝签收" value="3"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="签收数量" label-width="80px">
                    <el-input   v-model="add.signCount" ></el-input>
                </el-form-item>

                <el-form-item  label="图片上传" label-width="70px">
              <!--       el-upload：上传的组件
                        action：后端上传接口的地址
                        :show-file-list：false 一个一个上传
                        :on-success：图片上传成功后的回调函数（code:200），可以用于前端回显照片用
                        :before-upload：图片上传之前的回调函数(请求发送到后端之前)，可以用于图片校验，格式，大小
                      -->
                    <el-upload
                        class="avatar-uploader"
                        action="/api/signOrder/imgLoad"
                        :on-success="handleAvatarSuccess"
                        :show-file-list="false"  :headers="customHeaders">
                    <img :src="imgsrc" class="avatar-img" >
                    <div class="avatar-placeholder">
                        <i class="el-icon-plus avatar-icon"></i>
                    </div>
                    </el-upload>

                </el-form-item>  

                <el-form-item label="备注" label-width="80px">
                    <el-input   v-model="add.remarks" > </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSign">确 定</el-button>
            </div>
        </el-dialog>
      <!--  新增弹窗结束-->

    </div>
  </template>
  
  <script>
  export default {
    name: 'LogisticsManagement',
    data() {
      return {
        searchForm: {},
        options: [{ value: '0', label: '待分配' },
            { value: '1', label: '待调度' },
            { value: '2', label: '运输中' },
            { value: '3', label: '已签收' },
            { value: '4', label: '已拒绝' },
            { value: '5', label: '已取消' },
            { value: '6', label: '待提货' },], //订单状态下拉框
        // value: '',//订单状态下拉框赋值
        add:{},
        addVisible: false,
        originOptions: [ ],
        props: { value:'id',label:'name',children:'cityList' },  //配置级联选择器多选
        tableData: [], // 这里需要填充实际的数据
        pageSize: 7,
        total: 0,
        pageNum:1,
        token: '', // 初始化 token
        customHeaders: {} ,//jwt
        imgsrc:''
      }
    },
    methods: {
        /**
         * 图片上传
         */
      handleAvatarSuccess(resp){  
        console.log(resp);
        if(resp.code === 200){
          this.imgsrc=resp.data //上传成功后的图片路径
          this.add.imgSrc = this.imgsrc
          console.log("图");
          
          console.log(this.imgsrc);
          
          // this.updateImg()
        }
      },

      // updateImg(){ //修改图片
      //   this.$axios.post("/api/signOrder/updateImg",this.add)
      //     .then(resp=>{
      //       if(resp.data.code==200){
      //         this.$message.success('添加成功');
      //       }else{
      //         this.$message.error('添加失败');
      //       }
      //     })
      //     .catch(() => {
      //               this.$message.error('请求错误');
      //           });
      // },
     
      signOrderDetails(val) { //详情

           this.$router.push({ path: '/signOrderDetails',
            query:{ 'orderId': val.orderId  } })
           

        },
      addBtn(val) {//打开弹窗
        console.log(val.orderStatus);
        if(val.orderStatus=='3'||val.orderStatus=='4'){
              this.$message({
                  type: 'warning',
                  message: '已签收，无需签收'
              });
         }else{
          this.add={}
          this.addVisible = true;
          this.add.orderId=val.orderId
          this.add.signCount=val.goodsCount
         }
      },

      handleSign(){   //签收
        //签收  点击签收 ，跳弹窗，输入信息，保存，生成签收单
        let param = {};
        param.orderId = this.add.orderId
        param.signCount = this.add.signCount
        param.status = this.add.status
        param.imgSrc=this.add.imgSrc
        param.remarks = this.add.remarks
        if (this.add.status != null ){
          this.$axios.post("/api/signOrder/handleSign",param)
          .then(resp=>{
            console.log(resp.data);
            if(resp.data.code==200){
              this.$message({
                  type: 'success',
                  message: '签收完成'
                  });
                  this.addVisible=false
                  this.onSearch()
              }
              if(resp.data.code==2010){
              this.$message({
                  type: 'warning',
                  message: '拒绝签收'
                  });
                this.addVisible=false
                this.onSearch()
              }
             
          })
        }
        if(this.add.status == null){
            this.$message({
              type: 'warning',
              message: '请选择状态'
              });
        }
             

      },
      onSearch() {
        // 实现搜索逻辑
        let pageParam = {};
        pageParam.pageNum = this.pageNum;
        pageParam.pageSize = this.pageSize;
        pageParam.param = this.searchForm;
        this.$axios.post("/api/signOrder/querySignOrder",pageParam)
            .then(resp =>{
              console.log(resp.data)
              if(resp.data.code==200){
                //给数据tableData赋值
                this.tableData =resp.data.data.list
                //给分页总数赋值
                this.total = resp.data.data.total
            }
            })
      },
      queryOrigin(){
        //查询所有始发地
        this.$axios.get("/api/provincial/queryProvincial")
            .then(resp =>{
              console.log(resp.data)
              if(resp.data.code==200){
                this.originOptions = resp.data.data
              }
            })
      },

      onReset() {
        // 重置搜索表单
        this.searchForm = {}
        this.onSearch()
      },
      handleDetail(val) {
        // 查看详情操作
         // 将整行数据存储到 localStorage
        // localStorage.setItem('waybillDetails', JSON.stringify(row));
        // 导航到详情页面，只传递 ID
        this.$router.push({ path: '/details', query: { 'waybillId': val.waybillId } })
         // 导航到详情页面，只传递 ID
        // this.$router.push({ name: 'WaybillDetail', params: { id: row.id } });
      },


    nextPage(val){   //val 当前页 方法自动获取当前页
              //下一页  获取当前页pageNum
              this.pageNum= val;
              this.onSearch();
          },
    prevPage(val){
        //下一页
        this.pageNum= val;
        this.onSearch();
    },
    changePage(val){
        //当前页
        this.pageNum= val;
        this.onSearch();
    },
    sizeChange(val){
        //下拉框  每页条数
        this.pageSize= val;
        this.pageNum=1;
        this.onSearch();
    }

    },
    created() {
      this.onSearch()
      this.queryOrigin()
      this.token = localStorage.getItem('authorization'); // 从本地存储中获取 JWT 令牌    
      this.customHeaders = { "authorization": this.token }
    },
  }
  </script>
  
  <style scoped>
  .logistics-management {
    padding: 20px;
  }
  .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 50%;
        overflow: hidden;
        width: 100px; /* 根据需要调整大小 */
        height: 100px; /* 根据需要调整大小 */
        position: relative;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
  </style>